/*
 * 缩小版 左侧拖拽菜单
 */
import React from 'react';
import { Spin, Popover, Row, Col } from 'antd';

import ScrollBarLayout from '@/components/ScrollBarLayout';
import { DoubleRightOutlined, AppstoreOutlined } from '@ant-design/icons';

import cls from 'classnames';
import './styles.less';

interface IPaneComponent {
  nodeList: Record<string, any>[];
  backOpen: () => void;
}
export const NarrowPane: React.FC<IPaneComponent> = ({
  nodeList,
  backOpen,
}) => {
  const prefix = 'design-narrow-pane-';

  return (
    <div className={cls(prefix + 'layout')}>
      <Spin spinning={nodeList && nodeList?.length > 0 ? false : true}>
        <ScrollBarLayout style={{ padding: '0rem .5rem' }}>
          <div
            className={prefix + 'icon'}
            onClick={(e) => {
              e.stopPropagation();
              let composite: any = document.getElementById('design-composite');
              composite.style.width = '16%';
              backOpen();
            }}
          >
            <DoubleRightOutlined />
          </div>
          {nodeList &&
            nodeList?.length > 0 &&
            nodeList?.map((item) => {
              return (
                <Popover
                  trigger={'click'}
                  placement="right"
                  content={renderIcon(item?.dataList)}
                  key={item?.id}
                >
                  <div className={cls(prefix + 'icon')}>
                    {/* <MyIcon type={'icon-pintu'} /> */}
                    <AppstoreOutlined />
                  </div>
                </Popover>
              );
            })}
        </ScrollBarLayout>
      </Spin>
    </div>
  );
};

const renderIcon = (iconList: any[]) => {
  const onDrag = (event: React.DragEvent<HTMLAnchorElement>, node: any) => {
    event.dataTransfer.setData('Text', JSON.stringify(node.data));
  };
  return (
    <Row>
      {iconList && iconList.length > 0
        ? iconList.map((iconItem: any, iconIndex: any) => {
            let length = iconList?.length;
            return (
              <Col
                key={`${iconItem.name}_${iconIndex}`}
                span={length < 4 ? 24 / length : 8}
                className={cls('ivr-pane-col')}
              >
                <div>
                  <a
                    key={iconIndex}
                    title={iconItem.name}
                    className={cls('ivr-pane-icon')}
                    draggable={true}
                    onDragStart={(ev) => {
                      onDrag(ev, iconItem);
                    }}
                    style={{
                      color: iconItem.data.iconColor,
                    }}
                  >
                    <i
                      style={{
                        fontSize: '24px',
                        fontFamily: 'kettle',
                      }}
                      className="kettle"
                    >
                      {/* {iconItem.data.icon} */}
                      {iconItem?.icon}
                    </i>
                  </a>
                </div>
                <div className={cls('ivr-pane-icon-title')}>
                  {iconItem.name}
                </div>
              </Col>
            );
          })
        : null}
    </Row>
  );
};
